<template>
	<view>
		
		<mescroll-body v-show="!havecontent" ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="downOption"
			:up="upOption" @down="downCallback">
			<view class="">

				<!-- <view class="search-content flex-content p-l-10 p-r-10">
					<u-search shape="square" placeholder="请输入手机号" height="76" style="width: 710rpx;" ></u-search>
				</view> -->
				<!-- <view style="height: 150rpx; width: 100%;"></view> -->
				<view class="">
                       <view class="m-l-42 m-t-42 flex">
						   
                      	<view class="noselect-icon" v-if="allselect" @click="allSel(1)">
                       		
                       	</view>
						<view class="select-icon flex-content"  @click="allSel(2)" v-else>
							<u-icon name="checkmark" color="#fff" size="28"></u-icon>
						</view>
						<view class="lg m-l-36 " style="color: #595959;">
							全选
						</view>
						
                       </view>
					<view class="p-l-26 p-r-26">
						<view class="collect-driver m-t-28" v-for="(item,index) in list" :key="index"
							>
					  <collect-drlist :item="item" @selectdriver="selectdriver"></collect-drlist>

						</view>
					</view>
				</view>

			</view>
             <view class="bg-white flex-content" style="height: 160rpx;width: 100%; position: fixed;bottom: 0rpx;">
             	<view @click="affirmdriver" class="flex-content xxl" style="color: #FFFFFF; width:700rpx;height: 108rpx; background-color:#E85631; border-radius: 16rpx;">
             		确认
             	</view>
             </view>
			<!-- 		</mescroll-body> -->
		</mescroll-body>

	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		collectDriList,
		delCollectDri
	} from '@/api/user'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [],
				selectlist:[],
				downOption: {
					use: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				allselect:true,
				havecontent: false,
				upOption: {},
			}
		},
		methods: {
			selectdriver(item1){
				this.list.forEach(item=>{
					if(item.id===item1.id){
						if(item.drsel==true){
							this.allselect=true
							item.drsel=false
							let selectindex=0
							this.selectlist.forEach((item2,index)=>{
								if(item2==item1.id){
									selectindex=index
								}
							})
							this.selectlist.splice(selectindex,1)
						}else{
							if(item.driver.status!=3){
								item.drsel=true
								
								this.selectlist.push(item.id)
								if(this.selectlist.length==this.list.length){
									this.allselect=false
								}
							}
							
						}
						
					}
				})
			},
			affirmdriver(){
				console.log(this.selectlist);
			},
			//全选按钮
			allSel(type){
				if(type==1){
					this.allselect=false
					this.list.forEach(item=>{
						if(!this.selectlist.includes(item.id)){
							if(item.driver.status!=3){
							item.drsel=true
							this.selectlist.push(item.id)
							}
						}
					})
				}else{
					this.selectlist=[]
					this.list.forEach(item=>{
						item.drsel=false
					})
					this.allselect=true
				}
			},
			openserch(type){
				
					uni.navigateTo({
						url:`/bundle/pages/serch_driver/serch_driver?type=${type}`
					})
				
			},
			//获取司机主页
			getDrHome(item) {
				uni.navigateTo({
					url: `/bundle/pages/dr_home/dr_home?id=${item.id}&driver_id=${item.driver_id}`
				})
			},
			addcollection() {

					uni.navigateTo({
						url:`/bundle/pages/serch_driver/serch_driver?type=${type}`
					})
				this.havecontent = true
			},
			delCollectDriFun(id) {
				delCollectDri({
					id
				}).then(res => {
					if (res.code == 1) {
						this.$toast({
							title: '取消成功'
						})
						this.downCallback();
					}

				})
			},
			upCallback(page) {
				const pageNum = page.num; // 页码, 默认从1开始
				const pageSize = page.size; // 页长, 默认每页10条
				collectDriList({
					page: pageNum,
					limit: pageSize,
				}).then(({
					code,
					data
				}) => {
					if (code == 1) {
						if (page.num == 1) this.list = [];
						// console.log(page.num);
						const curPageData = data.lists;
						curPageData.forEach(item=>{
							item.drsel=false
						})
						const curPageLen = curPageData.length;
						const hasNext = !!data.more;
						this.list = this.list.concat(curPageData);
						if (this.list.length == 0) {
							this.havecontent = true

						}
						this.mescroll.endSuccess(curPageLen, hasNext);
					}

				}).catch(err => {
					this.mescroll.endErr()
				})
			},
		},
		computed: {

			getPhone(phone) {
				return function(phone) {
					if (typeof phone != 'undefined') {
						return phone.substr(0, 3) + '****' + phone.substr(7)
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.select-icon{
		width: 40rpx;
		height: 40rpx;
		border-radius: 30rpx;
		background-color: #E85631;
	}
	.noselect-icon{
		width: 40rpx;
		height: 40rpx;
		border-radius: 30rpx;
		border: 4rpx solid #C3C3C3;
	}
	.search-box{
		height: 84rpx;
		position: fixed;
		top: 36rpx;
		padding-right: 60rpx;
		padding-left: 60rpx;
		
		width: 100%;
		
	}
	.apply-time {
		width: 224rpx;
		height: 40rpx;
		border-radius: 12rpx;
		background-color: #F4F4F4;
		color: #807E7E;
	}

	.name-phone {
		justify-content: space-between;
		width: 460rpx;
	}

 .search-txt{
	 margin-right: 40rpx;
	 position: relative;
	 
 }
 .search-txt::after{
	 content: "";
	 position: absolute;
	 background-color: #ECECEC ;
	 width: 2rpx;
	 left: -16rpx;
	 top: 0rpx;
	 height: 48rpx;
 }
	.mescroll-empty {
		display: none !important;
	}

	.collect-btn {
		border: 2rpx;
		border-radius: 10rpx;
		color: #EE6841;

		border: 3rpx solid #EE6841;
	}

	.search-content {
		height:100%;
		justify-content: space-between;
		border: 2rpx solid #4D8EFB;
		top: 0rpx;
		width:100%;
		background-color: #FFFFFF;
	}


</style>
